<template>
  <van-cell title="选择的日期区间" :value="date" @click="show = true" />
  <van-calendar v-model:show="show" type="range" :min-date="new Date(2000, 0, 1)" :max-date="new Date()" @confirm="onConfirm" />
  <br>
   <van-cell title="应出勤" :value="searchTotal.shouldSign + '天'" />
  <van-cell title="正常出勤" :value="searchTotal.alreadySign +'天'" />
  <van-cell title="迟到" :value="searchTotal.lateSign +'天'" />
  <van-cell title="早退" :value="searchTotal.earlySign +'天'"></van-cell>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {useRouter} from "vue-router";
import myAxios from "../../plugins/myAxios.ts";

const router = useRouter();
const date = ref('');
const show = ref(false);
const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const searchTotal = ref('');

onMounted(async () => {
  date.value = `${formatDate(firstDayOfMonth)} - ${formatDate(today)}`
  await searchSignStateByTimePeriod();
})

const formatDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2,'0')}`;

const onConfirm = async (values) => {
  const [start, end] = values;
  show.value = false;
  date.value = `${formatDate(start)} - ${formatDate(end)}`;
  await searchSignStateByTimePeriod();
};
const searchSignStateByTimePeriod = async () =>{
    const splitDate = date.value.split(" - ");
    const res = await myAxios.get('/userSignState/byTimePeriod',{
      params:{
        startTime:splitDate[0],
        endTime:splitDate[1]
      },
    })
    searchTotal.value = res.data.data;
    return res.data.data;
}

</script>

<style scoped>
</style>